<!--
 * @Author: Hzh
 * @Date: 2021-04-23 09:57:53
 * @LastEditTime: 2021-04-25 14:14:21
 * @LastEditors: Hzh
 * @Description:测试微前端
-->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { loadMicroApp } from 'qiankun'
import { mapState } from 'vuex'
export default {
  name: '',

  components: {},

  props: {},

  data() {
    return {
      microApp: null
    }
  },

  computed: {
    ...mapState({
      sources: state => state.sources
    })
  },

  watch: {},

  created() { },

  async mounted() {
    // await this.loadMicroApps();
  },

  methods: {
    async loadMicroApps() {
      const apps = [
        {
          name: 'b-child',
          entry: '//localhost:8022',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值,传递给B应用'
          }
        },
        {
          name: 'c-child',
          entry: 'http://localhost:8033',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'zhuangTaiFenXi-child',
          entry: 'http://localhost:8041',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'zhiNengZhenDuan-child',
          entry: 'http://localhost:8042',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'zhiShiPeiXun-child',
          entry: 'http://localhost:8043',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'zhuangTaiYuCe-child',
          entry: 'http://localhost:8044',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'guZhangFenXi-child',
          entry: 'http://localhost:8045',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'zhuangTaiFanYan-child',
          entry: 'http://localhost:8046',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'SBTZ-child',
          entry: 'http://localhost:8034',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'JCSJ-child',
          entry: 'http://localhost:8035',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'FZGL-child',
          entry: 'http://localhost:8036',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
        {
          name: 'MXGL-child',
          entry: 'http://localhost:8037',
          container: '#microContainer',
          props: {
            parentStore: this.$store,
            msg: '我是父应用传过来的值，传递给C应用'
          }
        },
      ]

      for await (const item of apps) {
        this.microApp = loadMicroApp(item)
        await this.microApp.mountPromise
      }
      await this.microApp.unmount()
      this.$forceUpdate() // 解决视图不更新的问题
    }
  }
}
</script>

<style scoped lang="scss"></style>